#player_page{
  .select-player, .select-attr{
    .item{
      pointer-events: all;
    }
  }

  .select-player{
    overflow-x: auto;
    pointer-events: all;
    background: #f1f1f7;

    .btns{
      display: flex;
      width: fit-content;
    }

    .item{
      background: #f1f1f7;
      @include S(width, 60px);
      @include S(padding, 5px, 10px);
      border-right: 1px solid #dfdfdf;
      border-bottom: 1px solid #dfdfdf;
      @include PlainText;
      @include BreakText;
    }
    
    .active{
      background: white;
      border-bottom: unset;
    }
  }

  .wrapper{
    display: flex;
    height: calc(100vh - 100px);
  }
  
  .content{
    width: 100%;
    height: calc(100vh - 110px);
    background: white;
    overflow-y: auto;
    pointer-events: all;
    @include S(padding, 10px);
  }
  
  .select-attr{
    background: #f1f1f7;
  
    .item{
      background: #f1f1f7;
      writing-mode: vertical-lr;
      border-bottom: 1px solid #dfdfdf;
      cursor: pointer;
      @include S(padding, 10px, 8px);
      @include PlainText;
    }
      
    .active{
      background: white;
    }
  }

  .attr-page{
    .info{
      @include S(margin-bottom, 5px);
      @include S(padding-bottom, 5px);
      border-bottom: 1px solid #f0f0f0;
    }
  }

  h3{
    @include S(margin-bottom, 10px);
    @include Heading;
  }

  .limbs-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;

    .limb{
      .title{
        background: rgb(95, 95, 100);
        color: white;
        @include S(padding, 10px);
        @include Text;
      }

      p{
        @include PlainText;
      }
    }
  }

  .equip-page{

    .limb{
      @include S(margin-bottom, 10px);

      .title{
        background: rgb(95, 95, 100);
        color: white;
        @include S(padding, 10px);
        @include Text;
      }

      p{
        @include PlainText;
      }
    }

    .equips{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
      @include S(margin-top, 5px);

      @media (min-width: 1000px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }

    .equip{
      border: 1px solid #dedede;
      color: #666;
      pointer-events: all;
      @include S(padding, 10px);
      @include BreakText;
    }

  }

  .control-page{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;

    @media (min-width: 1000px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}